﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>恋爱表白接吻动画js代码 www.bootstrapmb.com</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
	  <a href="https://mp.weixin.qq.com/s/9V4UORySTqo_AP51jcGNaw" class="hide_buttom"
  style="position: fixed;top: 10%;right: 10px;width: 35px;height: 35px;z-index: 999;background: #696969;border-radius: 50%;padding: 1.0px;text-align: center;color: #ddd;text-decoration: none;   clear: both; line-height: 35px; 	margin:auto;   font-size: 13px;">制作</a>
  <a href="https://mp.weixin.qq.com/s/fq_11AozO7s2A9DrdDT46Q" class="hide_buttom"
  style="position: fixed;top: 4%;right: 10px;width: 35px;height: 35px;z-index: 999;background: #696969;border-radius: 50%;padding: 1.0px;text-align: center;color: #ddd;text-decoration: none;   clear: both; line-height: 35px; 	margin:auto;   font-size: 13px;   ">更多</a>
   
    <!-- partial:index.partial.html -->
    <div class="container">
        <svg id="couple" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="150 100 900 900">
            <style type="text/css">

                .st0 {
                    fill: #F8E5C5;
                }

                .st1 {
                    fill: #F0B38A;
                }

                .st2 {
                    fill: #660000;
                }

                .st3 {
                    fill: #161C1D;
                }

                .st4 {
                    fill: #EB1D23;
                }

                .st5 {
                    fill: url(#triangle-light_4_);
                    fill-opacity: 0.3;
                }

                .st6 {
                    fill: url(#triangle-light_5_);
                    fill-opacity: 0.3;
                }
            </style>
            <defs>
                <linearGradient id="hair-gradient">
                    <stop offset="0%" stop-color="#5e3634" />
                    <stop offset="50%" stop-color="#dfc57b" />
                </linearGradient>
                <linearGradient id="light-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="10%" stop-color="rgb(120,175,120)" />
                    <stop offset="60%" stop-color="#1a2124" />
                </linearGradient>
            </defs>
            <g>
                <path id="heart" class="st0" d="M626.6,310.7c-20.1-35-58.8-12.9-70.8,4.6c-11.7-17.5-50.7-39.6-70.8-4.6
		c-26.2,45.9,36.6,83.2,70.2,102c0.2,0,1,0.2,1.2,0C590.1,393.8,653,356.6,626.6,310.7L626.6,310.7z" />
                <path id="ground" class="st0" d="M604,886.9c-234.9,0-425,17-425,38.3c0,21.1,190.3,38.1,425,38.1c235,0,425.4-17,425.4-38.1
		C1029.4,903.9,839.2,886.9,604,886.9L604,886.9z" />
                <g id="girl">
                    <g id="girl-leg-1">
                        <polygon class="st1" points="698.6,810.7 817.1,839.3 820,833 705.1,788.9 			" />
                        <polygon class="st2" points="819.3,876.7 808.5,841.1 812.5,827 832.3,833 			" />
                    </g>
                    <g id="girl-leg-2">
                        <polygon class="st1" points="690.8,801.3 713.6,921.1 720.5,921.1 713.2,798.3 			" />
                        <polygon class="st2" points="679.9,931.5 711,910.9 725.5,910.9 725.5,931.5 			" />
                    </g>
                    <g id="girl-body">
                        <path id="girl-shirt" class="st0" d="M638,572.4c0,0-47.6,31.5,24,117.4l41-12.3L667.3,588l-9.7-21.6L638,572.4z" />
                        <path id="girl-skirt" class="st0" d="M667.3,666.5c-70.9,27.4-52.2,153.8-52.2,153.8s71.9,19.6,188.3-57
				C803.4,763.2,748.3,635.2,667.3,666.5L667.3,666.5z" />
                        <path id="girl-arm" class="st1" d="M609.1,652.2c0,0,42.7-48.8,49.7-42.7c7.3,6.5-38.6,52-38.6,52h-76.5L609.1,652.2z" />
                        <g id="girl-head">
                            <path id="girl-face" class="st1" d="M695.4,509.5c-2-27.6-35.9-47.4-75.5-44.6c-39.6,3.1-70.1,27.7-68,55.1c2,27.6,35.7,47.5,75.3,44.6
				C667,561.7,697.4,537,695.4,509.5L695.4,509.5z" />
                            <path id="girl-eye" class="st3" d="M579.7,507.6c-4.6,0.3-8,4.4-7.7,9c0.3,4.6,4.2,8.2,8.8,7.8c4.8-0.3,8.2-4.4,7.8-9
				C588.4,510.8,584.3,507.3,579.7,507.6L579.7,507.6z" />
                            <path id="girl-hair" class="st3" d="M561.8,491.5c0,0,25.8,24.7,76.2,33.5c18.5,32.6,57.5,136.6,57.5,136.6
				s41.2,39.8,78.4-1.9c-11.2-4.4-47.4-6.3-61.4-44.4c-13.9-38.3,6.6-90-13.3-125.5c-11.6-20.9-35.4-44.2-75.7-39.4
				C591.8,453.9,576.1,468.7,561.8,491.5L561.8,491.5z" />
                            <path id="girl-earring" class="st4" d="M646.9,525c0,4.8-3.9,8.7-8.8,8.7c-4.8,0-8.7-3.9-8.7-8.7s3.9-8.7,8.7-8.7C643,516.3,646.9,520.2,646.9,525
				L646.9,525z" />
                        </g>
                        <polygon class="st1" points="635.2,561.5 642.6,577.5 659.8,569.5 651.1,550.6 			" />
                    </g>
                </g>
                <g id="boy">
                    <polygon class="st2" points="481.6,901.5 498.9,901.5 500.8,901.5 500.6,903.2 532.6,925.5 480.4,925.5 480.4,901.5 		" />
                    <rect x="474.8" y="565.8" class="st1" width="16.8" height="13.3" />
                    <polygon class="st1" points="504.4,587.7 484.6,582.8 433.4,643.9 484.6,691.6 453.3,642.2 		" />
                    <path class="st1" d="M478.7,461.9c-41.3,0-75,24-75,53.6c0,29.6,33.7,53.6,75,53.6c41.5,0,75.2-24,75.2-53.6
			C553.9,485.8,520.2,461.9,478.7,461.9L478.7,461.9z" />
                    <path id="boy-eye" class="st3" d="M534.1,503.4c-4.1,0-7.3,3.4-7.3,7.3c0,3.9,3.2,7.1,7.3,7.1c3.9,0,7.1-3.2,7.1-7.1
			C541.3,506.8,538,503.4,534.1,503.4L534.1,503.4z" />
                    <path class="st3" d="M526.8,473.1c0,0-3.2,30.4-57.8,46.6c0,10.5-0.8,48.1-0.8,48.1h-64.5c0,0-26.2-76,41.3-101.4
			C463.4,461.9,489.6,454.9,526.8,473.1L526.8,473.1z" />
                    <path id="boy-hat-2" class="st2" d="M379.9,516.6c7.1,12.6,44.9,4.9,81.8-16.3c34.2-20.4,52.7-45.9,43.7-58
			c-8.7-11.9-40-6.5-72.5,13.4C397.9,476.3,373.1,504,379.9,516.6L379.9,516.6z" />
                    <path id="boy-hat-1" class="st0" d="M471.2,443.3c-5.1-4.6-13.6-12.2-20.1-11.6c-11.7,1.4-28.2,10-28.2,10s-17.9,9.4-24.1,17.5
			c-4.3,5.1-2.9,16.2-2.2,23c0.8,7,4.2,16.8,4.2,16.8c64.5-4.6,81.8-42.7,81.8-42.7S476.5,447.9,471.2,443.3L471.2,443.3z" />
                    <polygon id="boy-pants" class="st0" points="461.5,704.9 481.6,901.5 498.9,901.5 523.2,704.9 		" />
                    <polygon id="boy-shirt" class="st2" points="492.8,576 477.1,576 469.2,576 469.2,579 469.2,605.1 461.5,706.1 523.8,706.1
			509.8,576 508.3,576 		" />
                    <polygon class="st1" points="474.6,598.3 514.7,662.4 602.3,667.3 519.8,645.9 490.1,581.6 		" />
                    <path class="st1" d="M480.4,491.6c-6.3,0-11.6,9.7-11.6,21.4c0,11.9,5.3,21.6,11.6,21.6c6.5,0,11.6-9.7,11.6-21.6
			C491.9,501.3,486.8,491.6,480.4,491.6L480.4,491.6z" />
                    <polygon id="boy-sleeve" class="st0" points="469.2,594.9 489.7,626.2 513.9,610.3 493.3,579 		" />
                </g>
            </g>
            <polygon id="triangle-light" class="st5" points="1265.8,1383.2 542.5,0 0,1383.2 " />
        </svg>
    </div>
    <!-- partial -->
    <script src='jquery.min.js'></script>
    <script src='TweenMax.min.js'></script>
    <script src="./script.js"></script>
</body>
</html>
